/* eslint-disable react-compiler/react-compiler */
import { useMemo } from "react";
/* 

react 代码

function App() {
    return <div>hello</div>

} 

编译结果

function App() {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <div>hello</div>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}
*/

/* 

保证缓存是同一个 ，闭包和实例实现

function _c1(size) {
    //创建一个长度为size的缓存数组
    let array = new Array(size)
    //向每一项填充默认值
    array.fill(Symbol.for("react.memo_cache_sentinel"));
    return array;
} */

/* function c2(size) {
    //获取当前正在渲染的组件的实例
    const instance = React.getCurrentInstance();
    //如果说当前的实例没有缓存，则创建新的缓存
    if (!instance._cache) {
        instance._cache = new Array(size);
        instance._cache.fill(Symbol.for("react.memo_cache_sentinel"));
    }
    return instance._cache;
} */
/**
 * 
 *  
    console.log(cache);
 */

// 保证缓存是同一个 ，使用cache
function useCache() {
  const cache = useMemo(() => {
    let array = new Array(1);
    array.fill(Symbol.for("react.memo_cache_sentinel"));
    return array;
  }, []);
  return cache;
}
function App() {
  // 使用ReactCompiler初始化缓存，分配一个大小为1的缓存数组
  const cache = useCache(1); //[Symbol.for("react.memo_cache_sentinel")]
  //定义一个存储JSX的变量
  let jsxElement;
  //检查缓存的第一个位置是否是哨兵值，如果是的话表示未缓存
  if (cache[0] === Symbol.for("react.memo_cache_sentinel")) {
    //如果是哨兵值，创建新的JSX元素
    jsxElement = <div>hello</div>;
    //将生成的JSX元素存入缓存中
    cache[0] = jsxElement;
  } else {
    //如果缓存中已经有值，直接复用中的JSX元素
    jsxElement = cache[0];
  }
  ///返回JSX元素，复用或重新生成新的结果
  return jsxElement;
}
export default App;

/**

 */
